<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img class="img" :src="header" alt="" />
      </div>

      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <img :src="theme" class="qiehuan" @click="recvThemeChange" />
        <span class="datetime">{{ time }}</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div
          id="left-top"
          :class="[fullScreenStatus.trend ? 'fullscreen' : '']"
        >
          <!-- 销量趋势图表 -->
          <Trend ref="trend"></Trend>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('trend')"
              :class="[
                'iconfont',
                fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
            ></span>
          </div>
        </div>
        <div
          id="left-bottom"
          :class="[fullScreenStatus.seller ? 'fullscreen' : '']"
        >
          <!-- 商家销售金额图表 -->
          <Seller ref="seller"></Seller>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('seller')"
              :class="[
                'iconfont',
                fullScreenStatus.seller
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt'
              ]"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div
          id="middle-top"
          :class="[fullScreenStatus.map ? 'fullscreen' : '']"
        >
          <!-- 商家分布图表 -->
          <Map ref="map"></Map>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('map')"
              :class="[
                'iconfont',
                fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
            ></span>
          </div>
        </div>
        <div
          id="middle-bottom"
          :class="[fullScreenStatus.rank ? 'fullscreen' : '']"
        >
          <!-- 地区销量排行图表 -->
          <Rank ref="rank"></Rank>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('rank')"
              :class="[
                'iconfont',
                fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <!-- 热销商品占比图表 -->
          <Hot ref="hot"></Hot>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('hot')"
              :class="[
                'iconfont',
                fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
            ></span>
          </div>
        </div>
        <div
          id="right-bottom"
          :class="[fullScreenStatus.stock ? 'fullscreen' : '']"
        >
          <!-- 库存销量分析图表 -->
          <Stock ref="stock"></Stock>
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('stock')"
              :class="[
                'iconfont',
                fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
            ></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import Trend from '@/components/visual/Trend.vue'
import Seller from '@/components/visual/Seller.vue'
import Map from '@/components/visual/Map.vue'
import Rank from '@/components/visual/Rank.vue'
import Hot from '@/components/visual/Hot.vue'
import Stock from '@/components/visual/Stock.vue'
import moment from 'moment'
import {
  reactive,
  getCurrentInstance,
  computed,
  onMounted,
  ref,
  onBeforeUnmount
} from 'vue'
import { getThemeValue } from '../../utils/theme_utils'
import { useStore } from 'vuex'

const { proxy } = getCurrentInstance()
//管控切换大屏状态
const fullScreenStatus = reactive({
  trend: false,
  seller: false,
  map: false,
  rank: false,
  hot: false,
  stock: false
})
// const trend = ref(null)
// const seller = ref(null)
// const map = ref(null)
// const rank = ref(null)
// const hot = ref(null)
// const stock = ref(null)
const store = useStore()
//点击事件
const changeSize = (key) => {
  fullScreenStatus[key] = !fullScreenStatus[key]
  //要在最新的dom节点中来大屏
  proxy.$nextTick(() => {
    proxy.$refs[key].screenAdapter()
  })
}
const recvThemeChange = () => {
  store.commit('visual/changTheme')
  proxy.$forceUpdate()
}
const theme = computed(() => {
  return '/static/img/' + getThemeValue(store.state.visual.theme).themeSrc
})
const header = computed(() => {
  return (
    '/static/img/' + getThemeValue(store.state.visual.theme).headerBorderSrc
  )
})
const containerStyle = computed(() => {
  return {
    backgroundColor: getThemeValue(store.state.visual.theme).backgroundColor,
    color: getThemeValue(store.state.visual.theme).titleColor
  }
})
//
//时间
let timeId = null
let time = ref('')
const setDSQ = () => {
  setInterval(() => {
    time.value = moment().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
}

onMounted(() => {
  setDSQ()
  window.onresize = () => {
    for (let i in fullScreenStatus) {
      proxy.$refs[i].screenAdapter()
    }
  }
})
onBeforeUnmount(() => {
  clearInterval(timeId)
  window.onresize = null
})
</script>

<style lang="scss" scoped>
.fullscreen {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}
.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;

  > div {
    .img {
      width: 100%;
      position: absolute;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 35%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-120%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 1px;

  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
  font-size: 10px;
}
#left-top,
#left-bottom,
#middle-top,
#middle-bottom,
#right-top,
#right-bottom {
  border: 1px solid rgb(8, 94, 123);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  // border-top-color: rgb(5, 6, 6);
}
</style>
